<template>
	<view class="bg-color">
		<scroll-view>
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">{{ currentCategory.categoryName }}</block>
			</cu-custom>
			<view class="question-title">
				<span>{{questions[curIndex].type_dictText}}</span>
				<span class="numeric"><font class="cur-index">{{ curIndex + 1 }}</font> /{{ total }}</span>
			</view>
			<view class="split"/>
			<view class="question-content">{{ questions[curIndex].infoText }}</view>
			<view class="question-item uni-list">
				<radio-group v-if="questions[curIndex].type == '1'" @change="answerChange">
					<label class="uni-list-cell" v-for="(item, index) in questions[curIndex].aoQuestionItemList" :key="index">
						<radio :value="item.prefix"/>
						<span>{{item.infoText}}</span>
					</label>
				</radio-group>
				<checkbox-group v-else @change="answerChange">
					<label class="uni-list-cell" v-for="(item, index) in questions[curIndex].aoQuestionItemList" :key="index">
						<checkbox :value="item.prefix"/>
						<span>{{item.infoText}}</span>
					</label>
				</checkbox-group>
			</view>
			<view v-show="!questions[curIndex].selected"><button class="confirm-btn" @tap="answerOk()">确认答案</button></view>
			<view class="tool-box" v-show="questions[curIndex].selected">
				<view class="description">
					<span>答案</span>
					<p>正确答案<font> {{ questions[curIndex].correct }} </font>,您的答案<font> {{ questions[curIndex].selected }} </font>。</p>
					<span>解析</span>
					<p>{{ questions[curIndex].analysis }}</p>
				</view>
				<view class="control-box flex">
					<button type="default" @tap="back()">上一题</button>
					<button type="default" @tap="next()">下一题</button>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
export default {
	components:{},
	data() {
		return {
			mainId: null,
			currentCategory: {},
			curIndex: 0,
			total: 0,
			selected: null,
			questions: [],
			answerUrl: '/question/aoQuestion/loadAnswer?categoryId=',
			answerOkUrl: '/question/aoQuestionAnswerRecord/add'
		}
	},
	mounted(option) {
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		this.currentCategory = page.options;
		this.loadAnswer();
	},
	methods: {
		next(){
			if( this.curIndex >= this.total - 1 ){
				this.$tip.toast("已经到底啦");
			}else{
				this.selected = null;
				this.curIndex++;
			}
		},
		back(){
			if( this.curIndex == 0 ){
				this.$tip.toast("已经到头啦");
			}else{
				this.curIndex--;
			}
		},
		loadAnswer(){
			this.$http.get(this.answerUrl + (this.currentCategory.categoryCode ? this.currentCategory.categoryCode : 'A01A01A01') ).then(res=>{
				if (res.data.success) {
					this.questions = res.data.result.records;
					this.total = res.data.result.total;
				}
			}).catch(err => {
				console.log("err", err);
			});
		},
		answerChange(e){
			this.selected = e.detail.value;
		},
		answerOk(){
			if( !this.selected ){
				this.$tip.toast('请选择您的答案!');
			}else{
				if( this.questions[this.curIndex].type == 1 ){
					this.questions[this.curIndex].selected = this.selected;
				}else{
					this.questions[this.curIndex].selected = this.selected.join(",");
				}
				let params = {
					mainId: this.mainId,
					questionId: this.questions[this.curIndex].id,
					categoryId: this.questions[this.curIndex].categoryId,
					correct: this.questions[this.curIndex].correct,
					selected: this.questions[this.curIndex].selected
				}
				this.$http.post(this.answerOkUrl,params).then(res=>{
					if( !res.data.success ){
						this.$tip.error('系统异常!');
					}else{
						this.mainId = res.data.result;
					}
				});
			}
		}
	}
}
</script>

<style lang="scss">
	.bg-color{
		background: white;
	}
	
	.split{
		width: 100%;
		height: 10rpx;
		background-color: #f1f1f1;
	}
	
	.question-title{
		color: #737171;
		font-size: 14px;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 10px;
		span:nth-child(2){
			float: right;
			font{
				color: #39B54A;
			}
		}
	}
	
	.question-content{
		width: 100%;
		height: 100%;
		padding: 10rpx 25rpx;
		font-size: 14px;
	}
	
	.uni-list{
		width: 100%;
		padding: 10rpx 25rpx;
		radio-group,checkbox-group{
			display: block;
			width: 100%;
			.uni-list-cell{
				display: block;
				width: 100%;
				padding: 6rpx;
				span{
					margin-left: 10rpx;
				}
			}
		}
	}
	
	.confirm-btn{
		width: 50%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 30rpx;
		color: white;
		background: #70cf2b;
		font-size: 15px;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.tool-box{
		width: 100%;
		position: fixed;
		bottom: 0;
		background: white;
		.description{
			padding: 20rpx 20rpx 0 20rpx;
			span{
				color: #737171;
				font-size: 14px;
			}
			p{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font:nth-child(1){
					padding: 0 5rpx;
					color: #34d394;
				}
				font:nth-child(2){
					padding: 0 5rpx;
					color: #f1645f;
				}
			}
		}
		.control-box{
			button{
				width: 50%;
				padding: 0;
			}
		}
	}
</style>
